<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <el-form :model="queryParams" label-width="140px">
      <div style="display: flex;flex-wrap: wrap;">
        <el-form-item label="考勤组名称：">
          <el-input v-model="queryParams.name" size="small" placeholder="请输入考勤组名称" />
        </el-form-item>
        <el-form-item label="考勤组负责人:">
          <el-input v-model="queryParams.principal" size="small" placeholder="请选择考勤组负责人" />
        </el-form-item>
        <!-- <el-form-item label="参与考勤人员:">
          <el-select v-model="queryParams.Participants" placeholder="请选择参与考勤人员" clearable>
            <el-option v-for="item in teacherInfo" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item> -->
        <el-form-item label="上下班文案:">
          <el-input v-model="queryParams.copywriting" size="small" placeholder="请输入上下班文案" />
        </el-form-item>
        <!-- <el-form-item label="考勤组类型:">
          <el-select v-model="queryParams.attendanceGroupType" placeholder="请选择考勤组类型" clearable>
            <el-option />
          </el-select>
        </el-form-item> -->
        <span style="float: right; margin: 3px 10px;">
          <el-button type="primary" @click="search" size="mini">查询</el-button>
          <el-button style="margin-left: 8px" @click="reset" size="mini">重置</el-button>
        </span>
      </div>

    </el-form>
    <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="attendanceAdd">新增</el-button>
    <div>
      <!-- 表格区域 -->
      <el-table ref="multipleTable" :data="columns" tooltip-effect="dark" style="width: 100%">
        <el-table-column type="index" width="55" label="序号" align="center">
        </el-table-column>
        <el-table-column prop="name" label="考勤组名称" align="center">
        </el-table-column>
        <el-table-column prop="principal" label="考勤组负责人" align="center">
        </el-table-column>
        <el-table-column prop="Participants" label="参与考勤人员" align="center">
          <template slot-scope="scope">
            <div>
              <span v-for="(item,index) in scope.row.teacherNames" :key="index">{{ index+1+'.'+item +'\n' }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="copywriting" label="上下班文案" align="center">
        </el-table-column>
        <el-table-column prop="attendanceGroupType" label="考勤组类型" align="center">
          <template>
            <div>
              固定班制（每天考勤一致）
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="edit(scope.row)" type="text" class="el-icon-edit">修改</el-button>
            <el-button size="mini" @click="deleteBtn(scope.row)" type="text" icon="el-icon-delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>
    <!-- 新增和修改考勤组 -->
    <AddAttendanceGroup v-if="attendanceInfo.dialogVisible" :info="attendanceInfo" @close="attendanceClose" />
  </div>
</template>

<script>
import AddAttendanceGroup from './addAttendanceGroup.vue'
import { getAttendanceList, deleteAttendce } from '@/api/teach/attendanceSigngl'
import { mapState, mapGetters } from 'vuex';
import { selectTeacher } from "@/api/base/teacher";
export default {
  components: { AddAttendanceGroup },
  name: "gzt",
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      attendanceInfo: {
        dialogVisible: null
      },
      columns: [],
      total: 10,
      teacherInfo: []
    };
  },
  computed: {
    ...mapGetters(['name', 'userId']),
  },
  created() {
    this.getList();
    selectTeacher().then(response => {
      this.teacherInfo = response.rows
    });
  },
  methods: {
    async getList() {
      const { rows, code } = await getAttendanceList(this.queryParams)
      if (code === 200) {
        this.columns = rows
      }
    },
    search() {
      this.getList()
    },
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      }
      this.search()
    },
    attendanceAdd() {
      this.attendanceInfo.dialogVisible = true
      this.attendanceInfo.type = '1'
    },
    attendanceClose(e) {
      if (e === '1') {
        this.search()
        this.attendanceInfo.dialogVisible = false
      } else {
        this.attendanceInfo.dialogVisible = false

      }
    },
    edit(row) {
      this.attendanceInfo.dialogVisible = true
      this.attendanceInfo.type = '2'
      this.attendanceInfo.id = row.id
    },
    deleteBtn(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { code, msg } = await deleteAttendce(row.id)
        if (code === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.search()
        }

      })
    }
  }
};
</script>
<style scoped lang="scss"></style>
